<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>Data Acquisition - Hot Water System</title>
  <script type="text/javascript" src="highlight.pack.js"></script>
  <script type="text/javascript" src="highlightCode.js"></script>
  <link href='highlight.css' rel='stylesheet' />

    <script type="text/javascript" src="analogGaugeObject.js"></script>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script type="text/javascript" src="svg.js"></script>



<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body  style='padding:10px;font-family:arial;overflow:hidden'>
    <div id=container>

<center>
<h4>Data Acquisition - Hot Water System</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
   This shows a real-time interactive SVG SCADA drawing of the PID control loop for building's heating hot water system.

   Each time the data changes, it sent to and stored in the database. The data is then used to create charts, graphs, and tables for this system.

</div>
<table>
<tr>
<td valign=top >
<div style="text-align:justify;width:280px;padding:10px;">
   <b>Adjust Data Values</b><p></p>
 When the pump is ON (green), you can manually simulate value changes via the sliders below.
Whenever each value is changed, the data value is sent to the server, updating the database
for this SCADA process.
<table>
<tr><td>Outside Air</td><td><input disabled  onmousedown="OutsideAir=true" onmouseup="outsideAirRangeValue.value=this.value;sendOAT(this.value);OutsideAir=false"   id=outsideAirRangeValue style=width:100px type="range" value=70  min="70" step=.1 max="90"> <input style=width:40px id=outsideAirValue type="text" value=70.0 />&deg;</td></tr>
<tr><td>HWS</td><td><input disabled  onmousedown="HWSTemp=true" onmouseup="HWSRangeValue.value=this.value;sendHWS(this.value);HWSTemp=false"  id=HWSRangeValue style=width:100px type="range" value=130  min="130" step=.1 max="170"> <input style=width:40px id=HWSValue type="text" value=130.0 />&deg;</td></tr>
<tr><td>Flow</td><td><input disabled  onmousedown="FlowGpm=true" onmouseup="flowGpmRangeValue.value=this.value;sendFLOW(this.value);FlowGpm=false"  id=flowGpmRangeValue style=width:100px type="range" value=200  min="200" step=.1 max="240"> <input style=width:40px id=flowGpmValue type="text" value=200.0 />GPM</td></tr>
<tr><td>Valve</td><td><input disabled  onmousedown="ValvePos=true" onmouseup="valveRangeValue.value=this.value;sendVALVE(this.value);ValvePos=false"  id=valveRangeValue style=width:100px type="range" value=35  min="35" step=.1 max="50"> <input style=width:40px id=valveValue type="text" value=35.0 />%</td></tr>


</table>
 <p>
     NOTE: Data sent in this example is appended to the existing database of previous data sent by other users of this example.
<center><button  id=datableButton onclick=showDataTable()>Hot Water System Data Table</button><center>
 </p>

</div>

</td>
<td>
<div id=dataTableDiv style='visibility:hidden;padding:6px;border:2px solid black;position:absolute;top:135px;left:40px;width:500px;height:1px;background:white;overflow:hidden'>
<table style=width:100%><tr>
    <td style=width:90% align=center><b>Hot Water System Data Table</b></td>
    <td align=right><button onclick=closeDataTable()>X</button></td>

</tr></table>
    <table id=dataTable border=1 style=width:100%;border-collapse:collapse>
    </table>


</div>

<div id="svgDiv" style='border:1px solid black;width:800px;height:380px;'>
<svg xmlns="http://www.w3.org/2000/svg" id="mySVG" width="800" height="380" viewBox="0 0 800 380" style="cursor: default; touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><style xmlns="http://www.w3.org/1999/xhtml">.gridVFD line {stroke: black;stroke-opacity: 0.5;}.gridVFD path {stroke-width: 0;}.axisBlue line{stroke: blue;}.axisBlue path{stroke: blue;}.chartLineLeft {fill: none;stroke: DarkViolet;stroke-width: 3;}.chartLineRight2 {fill: none;stroke: red;stroke-width: 3;}.chartLineRight1 {fill: none;stroke: blue;stroke-width: 3;}.axisred line{stroke: red;}.axisred path{stroke: red;}.axisBlue line{stroke: blue;}.axisBlue path{stroke: blue;}.axisDarkViolet line{stroke: DarkViolet;}.axisDarkViolet path{stroke: DarkViolet;}</style><defs xmlns="http://www.w3.org/1999/xhtml"></defs>

<g id="publishG"><g id="publishElemG" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1" stroke-opacity="1.0" stroke-dasharray="8 4" marker-end="url(#arrow000000)" d="M 137 20 L 220 20 L 220 117" rightAngle="true" rotateAngle="0"/>
<!--pipe-->
<path id="pipe" fill="none" fill-opacity="1.0" stroke="#ADFF2F" stroke-width="20" stroke-opacity="1.0" d="M 399 48 L 399 27 L 766 27 L 766 218 L 470 218 L 470 283 L 49 283 L 49 48 z" filter="url(#pipe3D)" stroke-linejoin="round" rightAngle="true" rotateAngle="0"/>
 <g id="pathArrowsG" />

<path fill="none" fill-opacity="1.0" stroke="#FF0000" stroke-width="2" stroke-opacity="1.0" marker-end="url(#arrowFF0000)" d="M 582 151 L 681 151 L 681 177" rightAngle="true" rotateAngle="0"/><g xmlns="http://www.w3.org/2000/svg" transform="matrix(5.55112e-17 0.3 -0.3 5.55112e-17 147.5 -141.65)" parentid="component1520522111093">

<rect id="rect1520520864420" fill="white" fill-opacity="0" stroke="#000000" stroke-width="2" x="0" y="0" width="72" height="60" rx="10" ry="10" transform="matrix(1 0 0 1 501 39)"/>

<text id="text1520520897548" font-family="Arial" font-size="40" font-weight="bold" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 512 81)">

TT</text>

<rect id="rect1520520967040" fill="#000000" fill-opacity="1.0" stroke="#000000" stroke-width="2" x="0" y="0" width="19" height="37" transform="matrix(1 0 0 1 526 100)"/>

<rect id="rect1520521037307" fill="white" fill-opacity="0" stroke="#000000" stroke-width="2" x="0" y="0" width="38" height="91" rx="10" ry="10" transform="matrix(1 0 0 1 517 138)"/>

<rect id="rect1520521155532" fill="#FF0000" fill-opacity="1.0" stroke="#000000" stroke-width="0.5" x="0" y="0" width="27" height="10" transform="matrix(1 0 0 1 524 197)"/>

<text id="text1520521320528" font-family="Arial" font-size="25" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 527 253)">

IC</text>

<text id="icon1520521093750" font-size="45" font-family="Arial Unicode MS" stroke-width="1" fill="#4169E1" stroke="black" x="-24.7421875" y="17" transform="matrix(1 0 0 1 539 177)" cursor="default">

▼</text>

<rect width="72" height="219" fill="white" fill-opacity="0" transform="translate(501,39)" style="cursor: default;" vector-effects="non-scaling-stroke" stroke-width="6" stroke-opacity=".5"/>

</g><g xmlns="http://www.w3.org/2000/svg" transform="matrix(0.3 0 0 0.3 241.9 226.95)" parentid="component1520522111093">

<rect id="rect1520520864420" fill="white" fill-opacity="0" stroke="#000000" stroke-width="2" x="0" y="0" width="72" height="60" rx="10" ry="10" transform="matrix(1 0 0 1 501 39)"/>

<text id="text1520520897548" font-family="Arial" font-size="40" font-weight="bold" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 512 81)">

TT</text>

<rect id="rect1520520967040" fill="#000000" fill-opacity="1.0" stroke="#000000" stroke-width="2" x="0" y="0" width="19" height="37" transform="matrix(1 0 0 1 526 100)"/>

<rect id="rect1520521037307" fill="white" fill-opacity="0" stroke="#000000" stroke-width="2" x="0" y="0" width="38" height="91" rx="10" ry="10" transform="matrix(1 0 0 1 517 138)"/>

<rect id="rect1520521155532" fill="#FF0000" fill-opacity="1.0" stroke="#000000" stroke-width="0.5" x="0" y="0" width="27" height="10" transform="matrix(1 0 0 1 524 197)"/>

<text id="text1520521320528" font-family="Arial" font-size="25" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 527 253)">

IC</text>

<text id="icon1520521093750" font-size="45" font-family="Arial Unicode MS" stroke-width="1" fill="#4169E1" stroke="black" x="-24.7421875" y="17" transform="matrix(1 0 0 1 539 177)" cursor="default">

▼</text>

<rect width="72" height="219" fill="white" fill-opacity="0" transform="translate(501,39)" style="cursor: default;" vector-effects="non-scaling-stroke" stroke-width="6" stroke-opacity=".5"/>

</g>
<!--Heat Exchanger-->
<g title="Heat Exchanger" parentid="" transform="matrix(1.15 0 0 1.15 543.75 173.75)">

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" title="Heat Exchanger" class="Heating" height="82" width="170" viewBox="0 0 170 82.0034" nativewidth="170" nativeheight="82" overflow="visible" myscale="1.0">


    <defs>


        <linearGradient x1="0%" y2="100%" x2="0%" y1="0%" id="lg1_105">


            <stop stop-color="#b76c68" offset="0"/>


            <stop stop-color="#f09995" offset="0.15"/>



            <stop stop-color="#f6ccca" offset="0.25"/>

            <stop stop-color="#d17c78" offset="0.44"/>


            <stop stop-color="#ba6e6a" offset="0.6"/>


            <stop stop-color="#9d5c59" offset="0.8"/>


            <stop stop-color="#8f5451" offset="0.97"/>


        </linearGradient>


        <linearGradient x1="0%" y2="100%" x2="0%" y1="0%" id="lg2_105">


            <stop stop-color="#b76c68" offset="0"/>


            <stop stop-color="#f09995" offset="0.15"/>


            <stop stop-color="#f6ccca" offset="0.25"/>


            <stop stop-color="#d17c78" offset="0.44"/>


            <stop stop-color="#ba6e6a" offset="0.6"/>


            <stop stop-color="#9d5c59" offset="0.8"/>


            <stop stop-color="#8f5451" offset="0.97"/>


            <stop stop-color="#be716d" offset="1"/>


        </linearGradient>


        <linearGradient x1="0%" y2="100%" x2="0%" y1="0%" id="lg3_105">


            <stop stop-color="#b23e4b" offset="0"/>


            <stop stop-color="#e96a76" offset="0.15"/>


            <stop stop-color="#f3bbbf" offset="0.25"/>


            <stop stop-color="#cb4857" offset="0.44"/>


            <stop stop-color="#b5404c" offset="0.6"/>


            <stop stop-color="#98343f" offset="0.8"/>


            <stop stop-color="#8b2f39" offset="0.97"/>


            <stop stop-color="#b9414e" offset="1"/>


        </linearGradient>


        <linearGradient x1="100%" y2="0%" x2="0%" y1="0%" id="lg4_105">


            <stop stop-color="#a96460" offset="0"/>


            <stop stop-color="#f2adaa" offset="0.01"/>


            <stop stop-color="#dc837f" offset="0.05"/>


            <stop stop-color="#d9817d" offset="0.9"/>


            <stop stop-color="#d47e7a" offset="0.95"/>


            <stop stop-color="#9d5c59" offset="1"/>


        </linearGradient>


        <linearGradient x1="100%" y2="0%" x2="0%" y1="0%" id="lg5_105">


            <stop stop-color="#b76c68" offset="0"/>


            <stop stop-color="#f09995" offset="0.15"/>


            <stop stop-color="#f6ccca" offset="0.25"/>


            <stop stop-color="#d17c78" offset="0.44"/>


            <stop stop-color="#ba6e6a" offset="0.6"/>


            <stop stop-color="#9d5c59" offset="0.8"/>


            <stop stop-color="#8f5451" offset="0.97"/>


        </linearGradient>


    </defs>


    <g transform="translate(1.04,1)">


        <path transform="matrix(-1,0,0,1,168,18.3)" id="shape1" fill="url(#lg1_105)" d="M0,18.7C0,8.4,3.5,0,7.8,0C7.8,.5,7.6,37.3,7.8,37.4C3.5,37.4,0,29,0,18.7z"/>


        <path transform="translate(7.46,18.25)" id="shape2" fill="url(#lg1_105)" d="M0,0L153.1,0L153.1,37.6L0,37.6L0,0z"/>


        <path transform="translate(-0.04,18.25)" id="shape3" fill="url(#lg1_105)" d="M0,18.8C0,8.4,3.5,.1,7.8,.1C7.7,-1.9,8.1,37.7,7.8,37.6C3.5,37.6,0,29.1,0,18.8z"/>


        <g transform="translate(26.16,16.44)">


            <g transform="translate(8.72,0.66)">


                <path transform="translate(-0.01,7.15)" id="shape4" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,14.3)" id="shape5" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,21.45)" id="shape6" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,28.61)" id="shape7" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,35.76)" id="shape8" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,-0.01)" id="shape9" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


            </g>


            <g transform="translate(-0,0.66)">


                <path transform="translate(-0.01,7.15)" id="shape10" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,14.3)" id="shape11" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,21.45)" id="shape12" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,28.61)" id="shape13" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,35.76)" id="shape14" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,-0.01)" id="shape15" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


            </g>


            <path transform="translate(2.94,0)" id="shape16" fill="url(#lg3_105)" d="M.2,0L5.9,0C6.1,0,6.2,.2,6.2,.4L6.2,40.8C6.2,41,6.1,41.2,5.9,41.2L.2,41.2C.1,41.2,-0,41,-0,40.8L-0,.4C-0,.2,.1,0,.2,0z"/>


            <path transform="translate(3.65,0)" id="shape17" fill="url(#lg2_105)" d="M.2,0L4.6,0C4.7,0,4.8,.2,4.8,.4L4.8,40.8C4.8,41,4.7,41.2,4.6,41.2L.2,41.2C.1,41.2,-0,41,-0,40.8L-0,.4C-0,.2,.1,0,.2,0z"/>


        </g>


        <path transform="translate(40.92,54.52)" id="shape18" fill="url(#lg4_105)" d="M0,22L5.8,22L5.8,0L0,0L0,22z"/>


        <path transform="translate(37.85,76.22)" id="shape19" fill="url(#lg4_105)" d="M0,3.8L11.9,3.8L11.9,0L0,0L0,3.8z"/>


        <path transform="translate(121.3,54.52)" id="shape20" fill="url(#lg4_105)" d="M0,22L5.8,22L5.8,0L0,0L0,22z"/>


        <path transform="translate(118.24,76.22)" id="shape21" fill="url(#lg4_105)" d="M0,3.8L11.9,3.8L11.9,0L0,0L0,3.8z"/>


        <g transform="translate(129.51,16.44)">


            <g transform="translate(8.72,0.66)">


                <path transform="translate(-0.01,7.15)" id="shape22" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,14.3)" id="shape23" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,21.45)" id="shape24" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,28.61)" id="shape25" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,35.76)" id="shape26" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,-0.01)" id="shape27" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


            </g>


            <g transform="translate(-0,0.66)">


                <path transform="translate(-0.01,7.15)" id="shape28" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,14.3)" id="shape29" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,21.45)" id="shape30" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,28.61)" id="shape31" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,35.76)" id="shape32" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


                <path transform="translate(-0.01,-0.01)" id="shape33" fill="url(#lg2_105)" d="M.2,0L2.8,0C3,0,3.1,.2,3.1,.4L3.1,3.7C3.1,3.9,3,4.1,2.8,4.1L.2,4.1C.1,4.1,0,3.9,0,3.7L0,.4C0,.2,.1,0,.2,0z"/>


            </g>


            <path transform="translate(2.94,0)" id="shape34" fill="url(#lg3_105)" d="M.2,0L5.9,0C6.1,0,6.2,.2,6.2,.4L6.2,40.8C6.2,41,6.1,41.2,5.9,41.2L.2,41.2C.1,41.2,-0,41,-0,40.8L-0,.4C-0,.2,.1,0,.2,0z"/>


            <path transform="translate(3.65,0)" id="shape35" fill="url(#lg2_105)" d="M.2,0L4.6,0C4.7,0,4.8,.2,4.8,.4L4.8,40.8C4.8,41,4.7,41.2,4.6,41.2L.2,41.2C.1,41.2,-0,41,-0,40.8L-0,.4C-0,.2,.1,0,.2,0z"/>


        </g>


        <g transform="translate(53.12,55.82)">


            <path transform="matrix(1,0,0,-1,2.5,10.3)" id="shape36" fill="url(#lg5_105)" d="M0,10.3L3.6,10.3L3.6,0L0,0L0,10.3z"/>


            <path transform="matrix(1,0,0,-1,-0,12.3)" id="shape37" fill="url(#lg5_105)" d="M.3,-0L8.4,-0C8.6,-0,8.7,.1,8.7,.3L8.7,1.7C8.7,1.9,8.6,2.1,8.4,2.1L.3,2.1C.1,2.1,-0,1.9,-0,1.7L-0,.3C-0,.1,.1,-0,.3,-0z"/>


        </g>


        <g transform="translate(110.56,0.24)">


            <path transform="translate(3.84,2.9)" id="shape38" fill="url(#lg5_105)" d="M0,15.4L9,15.4L9,0L0,0L0,15.4z"/>


            <path transform="translate(0.02,-0.03)" id="shape39" fill="url(#lg5_105)" d="M.6,-0L15.9,-0C16.3,-0,16.6,.2,16.6,.5L16.6,2.6C16.6,2.8,16.3,3.1,15.9,3.1L.6,3.1C.3,3.1,-0,2.8,-0,2.6L-0,.5C-0,.2,.3,-0,.6,-0z"/>


        </g>


        <g transform="translate(141.06,0.03)">


            <path transform="translate(3.84,2.9)" id="shape40" fill="url(#lg5_105)" d="M0,15.4L9,15.4L9,0L0,0L0,15.4z"/>


            <path transform="translate(0.02,-0.03)" id="shape41" fill="url(#lg5_105)" d="M.6,-0L15.9,-0C16.3,-0,16.6,.2,16.6,.5L16.6,2.6C16.6,2.8,16.3,3.1,15.9,3.1L.6,3.1C.3,3.1,-0,2.8,-0,2.6L-0,.5C-0,.2,.3,-0,.6,-0z"/>


        </g>


    </g>


</svg>

<rect width="170" height="82" stroke="none" stroke-width="2" fill="white" fill-opacity="0" style="cursor: default;"/>

</g> <!--End Heat Exchanger-->

 <!--Pump-->
<g title="Horizontal Pump" parentid="" transform="matrix(0.6 0 0 0.6 351.3 15.3)">

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" title="Horizontal Pump" class="Pumps" height="106" width="154" viewBox="0 0 154 105.947" nativewidth="154" nativeheight="106" overflow="visible" myscale="1.0">


    <defs>


        <linearGradient x1="0%" y2="0%" x2="100%" y1="0%" id="lg1_219">


            <stop stop-color="#9aa1aa" offset="0"/>


            <stop stop-color="#aeb5c0" offset="0.22"/>


            <stop stop-color="#dce0e5" offset="0.57"/>


            <stop stop-color="#cacfd7" offset="0.84"/>


            <stop stop-color="#a7afb9" offset="1"/>


        </linearGradient>


        <linearGradient x1="0%" y2="0%" x2="100%" y1="0%" id="lg2_219">


            <stop stop-color="#8f969d" offset="0"/>


            <stop stop-color="#d3d8de" offset="0.64"/>


            <stop stop-color="#9aa0a8" offset="1"/>


        </linearGradient>


        <linearGradient x1="0%" y2="0%" x2="100%" y1="0%" id="lg3_219">


            <stop stop-color="#626974" offset="0"/>


            <stop stop-color="#ccd0d5" offset="0.66"/>


            <stop stop-color="#5e6670" offset="1"/>


        </linearGradient>


        <radialGradient fy="51" r="72.6" id="rg1" cy="51" cx="51" gradientUnits="userSpaceOnUse" fx="51">


            <stop stop-color="#c7cbd1" offset="0"/>


            <stop stop-color="#c4c7cd" offset="0.91"/>


            <stop stop-color="#d4d8dd" offset="0.74"/>


            <stop stop-color="#b6bcc4" offset="0.54"/>


        </radialGradient>


    </defs>


    <g transform="translate(1.01,1)">


        <g transform="matrix(-1,0,0,1,74.4,31.2)">


            <path transform="matrix(0,-1,-1,0,68.3,40.6)" id="shape1" fill="url(#lg1_219)" d="M0,0L39.1,0L39.1,68.3L0,68.3L0,0z"/>


            <path transform="matrix(0,-1,-1,0,74.4,42.9)" id="shape2" fill="url(#lg2_219)" d="M1.4,-0L41.5,-0C42.2,-0,42.9,1.3,42.9,3C42.9,4.7,42.2,6.1,41.5,6.1L1.4,6.1C.6,6.1,0,4.7,0,3C0,1.3,.6,-0,1.4,-0z"/>


            <path transform="matrix(0,-1,-1,0,70.3,42.7)" id="shape3" fill="url(#lg3_219)" d="M42.5,0C42.4,1.1,41.9,1.9,41.1,1.9L1.4,1.9C.6,1.9,.1,1,0,0C0,0,42.5,0,42.5,0z"/>


            <path transform="matrix(0,-1,-1,0,74.1,42.2)" id="shape4" fill="#ffffff" fill-opacity="0.32" d="M.7,0L40.8,0C41.2,0,41.5,.3,41.5,.6C41.5,.9,41.2,1.1,40.8,1.1L.7,1.1C.3,1.1,0,.9,0,.6C0,.3,.3,0,.7,0z"/>


        </g>


        <g transform="translate(77.55,0)">


            <path transform="matrix(0,-1,-1,0,68.3,40.7)" id="shape5" fill="url(#lg1_219)" d="M0,0L39.1,0L39.1,68.3L0,68.3L0,0z"/>


            <path transform="matrix(0,-1,-1,0,74.4,42.9)" id="shape6" fill="url(#lg2_219)" d="M1.4,-0L41.5,-0C42.2,-0,42.9,1.3,42.9,3C42.9,4.7,42.2,6.1,41.5,6.1L1.4,6.1C.6,6.1,0,4.7,0,3C0,1.3,.6,-0,1.4,-0z"/>


            <path transform="matrix(0,-1,-1,0,70.3,42.7)" id="shape7" fill="url(#lg3_219)" d="M42.5,0C42.4,1.1,41.9,1.9,41.1,1.9L1.4,1.9C.6,1.9,.1,1,0,0C0,0,42.5,0,42.5,0z"/>


            <path transform="matrix(0,-1,-1,0,74.1,42.2)" id="shape8" fill="#ffffff" fill-opacity="0.35" d="M.7,0L40.8,0C41.2,0,41.5,.3,41.5,.6C41.5,.9,41.2,1.1,40.8,1.1L.7,1.1C.3,1.1,0,.9,0,.6C0,.3,.3,0,.7,0z"/>


        </g>


        <g transform="translate(26.19,1.31)">


            <path transform="matrix(0,-1,-1,0,102.8,102.6)" id="shape9" fill="url(#rg1)" stroke="#d4d6db" stroke-width="0.25" d="M0,51.4C0,23,23,0,51.3,0C79.7,0,102.6,23,102.6,51.4C102.6,79.8,79.7,102.8,51.3,102.8C23,102.8,0,79.8,0,51.4z"/>


            <path transform="matrix(0,-1,-1,0,94.2,94)" id="shape10" fill="#ffffff" fill-opacity="0.27" d="M0,42.7C0,19.1,19.1,0,42.6,0C66.2,0,85.3,19.1,85.3,42.7C85.3,66.3,66.2,85.5,42.6,85.5C19.1,85.5,0,66.3,0,42.7z"/>


            <path transform="matrix(0,-1,-1,0,85.9,93.9)" id="shape11" fill="#ffffff" fill-opacity="0.13" d="M0,34.5C-0.3,13,17.1,0,17.1,0L73.1,63.9C73.1,63.9,62.3,77.3,42.6,77.3C19.1,77.3,0,58.1,0,34.5z"/>


        </g>


    </g>


</svg>

<rect width="154" height="106" stroke="none" stroke-width="2" fill="white" fill-opacity="0" style="cursor: default;"/>

</g><!--End Pump-->

<!--Valve-->
<g title="Control Valve" parentid="" transform="matrix(-0.5 0 0 0.5 665 74)">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" title="Control Valve" class="Valves" height="172" viewBox="0 0 112 172.004" width="112" nativewidth="112" nativeheight="172" overflow="visible" myscale="1.0">


    <defs>


        <linearGradient x2="0%" y1="0%" id="lg1_417" y2="100%" x1="0%">


            <stop stop-color="#c2b39f" offset="0"/>


            <stop stop-color="#fdead3" offset="0.15"/>


            <stop stop-color="#fef3e7" offset="0.25"/>


            <stop stop-color="#deccb6" offset="0.52"/>


            <stop stop-color="#c5b5a2" offset="0.69"/>


            <stop stop-color="#baab98" offset="0.8"/>


            <stop stop-color="#b0a190" offset="0.97"/>


            <stop stop-color="#cabaa5" offset="1"/>


        </linearGradient>


        <linearGradient x2="0%" y1="0%" id="lg2_417" y2="0%" x1="100%">


            <stop stop-color="#b3a593" offset="0"/>


            <stop stop-color="#fdeeda" offset="0.03"/>


            <stop stop-color="#e9d7bf" offset="0.08"/>


            <stop stop-color="#e5d3bc" offset="0.64"/>


            <stop stop-color="#e0ceb8" offset="0.95"/>


            <stop stop-color="#a69988" offset="1"/>


        </linearGradient>


        <linearGradient x2="0%" y1="0%" id="lg3_417" y2="0%" x1="100%">


            <stop stop-color="#c4aa84" offset="0"/>


            <stop stop-color="#ffe0b3" offset="0.15"/>


            <stop stop-color="#ffeed7" offset="0.25"/>


            <stop stop-color="#dfc297" offset="0.52"/>


            <stop stop-color="#c7ad86" offset="0.69"/>


            <stop stop-color="#bca37e" offset="0.8"/>


            <stop stop-color="#b19a77" offset="0.97"/>


            <stop stop-color="#cbb189" offset="1"/>


        </linearGradient>


        <linearGradient x2="0%" y1="0%" id="lg4_417" y2="0%" x1="100%">


            <stop stop-color="#c2b39f" offset="0"/>


            <stop stop-color="#fdead3" offset="0.15"/>


            <stop stop-color="#fef3e7" offset="0.25"/>


            <stop stop-color="#deccb6" offset="0.52"/>


            <stop stop-color="#c5b5a2" offset="0.69"/>


            <stop stop-color="#baab98" offset="0.8"/>


            <stop stop-color="#b0a190" offset="0.97"/>


            <stop stop-color="#cabaa5" offset="1"/>


        </linearGradient>


        <linearGradient x2="0%" y1="0%" id="lg5_417" y2="0%" x1="100%">


            <stop stop-color="#bda47f" offset="0"/>


            <stop stop-color="#ffe0b3" offset="0.15"/>


            <stop stop-color="#ffeed7" offset="0.25"/>


            <stop stop-color="#dfc297" offset="0.52"/>


            <stop stop-color="#c7ad86" offset="0.69"/>


            <stop stop-color="#bca37e" offset="0.8"/>


            <stop stop-color="#b19a77" offset="0.92"/>


            <stop stop-color="#cbb189" offset="1"/>


        </linearGradient>


        <linearGradient x2="0%" y1="0%" id="lg6_417" y2="100%" x1="0%">


            <stop stop-color="#bda47f" offset="0"/>


            <stop stop-color="#ffe0b3" offset="0.15"/>


            <stop stop-color="#ffeed7" offset="0.25"/>


            <stop stop-color="#dfc297" offset="0.52"/>


            <stop stop-color="#c7ad86" offset="0.69"/>


            <stop stop-color="#bca37e" offset="0.8"/>


            <stop stop-color="#b19a77" offset="0.92"/>


            <stop stop-color="#cbb189" offset="1"/>


        </linearGradient>


        <linearGradient x2="4" y1="3" id="lg7_417" y2="1" x1="-0" gradientUnits="userSpaceOnUse">


            <stop stop-color="#c7ad86" offset="0"/>


            <stop stop-color="#ffe6c5" offset="0.15"/>


            <stop stop-color="#ffe8c9" offset="0.25"/>


            <stop stop-color="#dfc297" offset="0.52"/>


            <stop stop-color="#c7ad86" offset="0.69"/>


            <stop stop-color="#bca37e" offset="0.8"/>


            <stop stop-color="#b19a77" offset="0.92"/>


        </linearGradient>


        <linearGradient x2="5" y1="4" id="lg8_417" y2="1" x1="-0" gradientUnits="userSpaceOnUse">


            <stop stop-color="#c7ad86" offset="0"/>


            <stop stop-color="#ffe6c5" offset="0.15"/>


            <stop stop-color="#ffe8c9" offset="0.25"/>


            <stop stop-color="#dfc297" offset="0.52"/>


            <stop stop-color="#c7ad86" offset="0.69"/>


            <stop stop-color="#bca37e" offset="0.8"/>


            <stop stop-color="#b19a77" offset="0.92"/>


        </linearGradient>


        <linearGradient x2="0%" y1="0%" id="lg9_417" y2="0%" x1="100%">


            <stop stop-color="#b59d79" offset="0"/>


            <stop stop-color="#ffe5c1" offset="0.03"/>


            <stop stop-color="#ebcc9f" offset="0.08"/>


            <stop stop-color="#e7c99c" offset="0.64"/>


            <stop stop-color="#e2c499" offset="0.95"/>


            <stop stop-color="#a89170" offset="1"/>


        </linearGradient>


        <linearGradient x2="0%" y1="0%" id="lg10_417" y2="0%" x1="100%">


            <stop stop-color="#b39d73" offset="0"/>


            <stop stop-color="#ebd0a1" offset="0.15"/>


            <stop stop-color="#f4e5cf" offset="0.25"/>


            <stop stop-color="#cdb384" offset="0.52"/>


            <stop stop-color="#b69f75" offset="0.69"/>


            <stop stop-color="#ac966e" offset="0.8"/>


            <stop stop-color="#a28e68" offset="0.97"/>


            <stop stop-color="#baa378" offset="1"/>


        </linearGradient>


        <linearGradient x2="4" y1="-0" id="lg11_417" y2="5" x1="1" gradientUnits="userSpaceOnUse">


            <stop stop-color="#9f5153" offset="0"/>


            <stop stop-color="#7b030d" offset="1"/>


        </linearGradient>


        <linearGradient x2="4" y1="-0" id="lg12_417" y2="5" x1="1" gradientUnits="userSpaceOnUse">


            <stop stop-color="#91cfd1" offset="0"/>


            <stop stop-color="#49aeb1" offset="1"/>


        </linearGradient>


        <linearGradient x2="0%" y1="0%" id="lg13_417" y2="0%" x1="100%">


            <stop stop-color="#000000" offset="0"/>


            <stop stop-color="#454545" offset="0.15"/>


            <stop stop-color="#b3b3b3" offset="0.25"/>


            <stop stop-color="#000000" offset="0.52"/>


            <stop stop-color="#000000" offset="0.69"/>


            <stop stop-color="#000000" offset="0.8"/>


            <stop stop-color="#000000" offset="0.92"/>


            <stop stop-color="#000000" offset="1"/>


        </linearGradient>


    </defs>


    <g transform="translate(1,1)">


        <g transform="translate(0,136.05)">


            <path id="shape1" d="M1.5,0L4.4,0C5.3,0,5.9,.3,5.9,.8L5.9,31.5C5.9,31.9,5.3,32.2,4.4,32.2L1.5,32.2C.7,32.2,0,31.9,0,31.5L0,.8C0,.3,.7,0,1.5,0z" fill="url(#lg1_417)" transform="translate(-0,0.86)"/>


            <path id="shape2" d="M1.5,0L4.4,0C5.3,0,5.9,.3,5.9,.8L5.9,31.5C5.9,31.9,5.3,32.2,4.4,32.2L1.5,32.2C.7,32.2,0,31.9,0,31.5L0,.8C0,.3,.7,0,1.5,0z" fill="url(#lg1_417)" transform="translate(104.06,0.86)"/>


            <path id="shape3" d="M8.1,0L0,0L0,17.1L8.1,17.1L8.1,0z" fill="url(#lg1_417)" transform="translate(5.78,8.44)"/>


            <path id="shape4" d="M0,0L8.1,0L8.1,17.1L0,17.1L0,0z" fill="url(#lg1_417)" transform="translate(95.97,8.44)"/>


            <path id="shape5" d="M2.9,0L0,0L0,28.6L2.9,28.6L2.9,0z" fill="url(#lg1_417)" transform="translate(93.07,2.66)"/>


            <path id="shape6" d="M0,0L76.3,0L76.3,33.9L0,33.9L0,0z" fill="url(#lg1_417)" transform="translate(16.84,0)"/>


            <path id="shape7" d="M0,0L1.1,0L1.1,33.9L0,33.9L0,0z" fill="url(#lg1_417)" transform="translate(92.5,0)"/>


            <path id="shape8" d="M2.9,0L0,0L0,28.6L2.9,28.6L2.9,0z" fill="url(#lg1_417)" transform="translate(13.86,2.66)"/>


            <path id="shape9" d="M0,0L1.1,0L1.1,33.9L0,33.9L0,0z" fill="url(#lg1_417)" transform="translate(16.79,0)"/>


        </g>


        <path id="shape10" d="M0,15.9L44.2,15.9L29.6,0L14.6,0L0,15.9z" fill="url(#lg2_417)" transform="translate(32.92,108.37)"/>


        <path id="shape11" d="M0,28.3L15.1,28.3L15.1,0L0,0L0,28.3z" fill="url(#lg3_417)" transform="translate(47.46,35.97)"/>


        <path id="shape12" d="M.4,-0L17.6,-0C17.8,-0,18,.1,18,.3L18,3.9C18,4.1,17.8,4.2,17.6,4.2L.4,4.2C.2,4.2,0,4.1,0,3.9L0,.3C0,.1,.2,-0,.4,-0z" fill="url(#lg4_417)" transform="translate(46,33.64)"/>


        <path id="shape13" d="M0,0L2.7,0L2.7,11.3L0,11.3L0,0z" fill="url(#lg5_417)" transform="matrix(1,0,0,-1,55.4,14.9)"/>


        <path id="shape14" d="M0,2.7L0,0L46.1,0L46.1,2.7L0,2.7z" fill="url(#lg6_417)" transform="matrix(1,0,0,-1,8.5,2.7)"/>


        <path id="shape15" d="M0,0L2.7,0L2.7,82.2L0,82.2L0,0z" fill="url(#lg5_417)" transform="matrix(1,0,0,-1,4.7,85.7)"/>


        <path id="shape16" d="M0,0C0,0,2.1,.1,3.1,1.2C4,2.4,3.9,4.2,3.9,4.2L1.2,4.2C1.2,4.2,1.2,3.2,0,2.7L0,0z" fill="url(#lg7_417)" transform="matrix(-1,0,0,1,8.7,-0)"/>


        <path id="shape17" d="M0,0C0,0,2.2,.1,3.3,1.3C4.4,2.6,4.2,4.6,4.2,4.6L1.3,4.6C1.3,4.6,1.3,3.4,0,2.9L0,0z" fill="url(#lg8_417)" transform="translate(54,-0)"/>


        <g transform="translate(31.67,14.89)">


            <g transform="translate(0,9.64)">


                <path id="shape18" d="M.4,-0L31.9,-0C32.1,-0,32.3,.2,32.3,.4L32.3,4.4C32.3,4.6,32.1,4.8,31.9,4.8L.4,4.8C.2,4.8,0,4.6,0,4.4L0,.4C0,.2,.2,-0,.4,-0z" fill="url(#lg4_417)" transform="translate(7.19,4.44)"/>


                <path id="shape19" d="M.4,-0L46.2,-0C46.5,-0,46.7,.2,46.7,.4L46.7,4C46.7,4.2,46.5,4.4,46.2,4.4L.4,4.4C.2,4.4,0,4.2,0,4L0,.4C0,.2,.2,-0,.4,-0z" fill="url(#lg4_417)"/>


            </g>


            <g transform="matrix(1,0,0,-1,0,9.2)">


                <path id="shape20" d="M.4,-0L31.9,-0C32.1,-0,32.3,.2,32.3,.4L32.3,4.4C32.3,4.6,32.1,4.8,31.9,4.8L.4,4.8C.2,4.8,0,4.6,0,4.4L0,.4C0,.2,.2,-0,.4,-0z" fill="url(#lg4_417)" transform="translate(7.19,4.44)"/>


                <path id="shape21" d="M.4,-0L46.2,-0C46.5,-0,46.7,.2,46.7,.4L46.7,4C46.7,4.2,46.5,4.4,46.2,4.4L.4,4.4C.2,4.4,0,4.2,0,4L0,.4C0,.2,.2,-0,.4,-0z" fill="url(#lg4_417)"/>


            </g>


        </g>


        <g transform="translate(39.18,63.48)">


            <path id="shape22" d="M5.6,0L26.1,0L31.6,5.6L31.6,36.5L26.1,42.1L5.6,42.1L0,36.5L0,5.6L5.6,0z" fill="url(#lg2_417)" transform="translate(0,3.14)"/>


            <path id="shape23" d="M.3,0L25.3,0C25.4,0,25.6,.1,25.6,.3L25.6,31.1C25.6,31.3,25.4,31.4,25.3,31.4L.3,31.4C.1,31.4,0,31.3,0,31.1L0,.3C0,.1,.1,0,.3,0z" fill="url(#lg2_417)" transform="translate(3.03,-0)"/>


            <path id="shape24" d="M.3,0L3.4,0C3.5,0,3.7,.1,3.7,.3L3.7,12.1C3.7,12.3,3.5,12.4,3.4,12.4L.3,12.4C.1,12.4,0,12.3,0,12.1L0,.3C0,.1,.1,0,.3,0z" fill="url(#lg9_417)" transform="translate(6.5,31.4)"/>


            <path id="shape25" d="M.3,0L3.4,0C3.5,0,3.7,.1,3.7,.3L3.7,12.1C3.7,12.3,3.5,12.4,3.4,12.4L.3,12.4C.1,12.4,0,12.3,0,12.1L0,.3C0,.1,.1,0,.3,0z" fill="url(#lg9_417)" transform="translate(21.6,31.4)"/>


            <path id="shape26" d="M.3,-0L25.4,-0C25.5,-0,25.6,.1,25.6,.3L25.6,2.5C25.6,2.7,25.4,2.8,25.3,2.8L.3,2.8C.1,2.8,0,2.7,0,2.5L.1,.3C.1,.1,.2,-0,.3,-0z" fill="url(#lg9_417)" transform="translate(3.03,28.61)"/>


        </g>


        <path id="shape27" d="M0,2.7L0,0L34,0L34,2.7L0,2.7z" fill="url(#lg6_417)" transform="matrix(1,0,0,-1,8.5,89.4)"/>


        <path id="shape28" d="M0,0C0,0,2.1,.1,3.1,1.2C4,2.4,3.9,4.2,3.9,4.2L1.2,4.2C1.2,4.2,1.2,3.2,0,2.7L0,0z" fill="url(#lg7_417)" transform="matrix(-1,0,0,-1,8.5,89.4)"/>


        <path id="shape29" d="M44.2,0L0,0L0,8.7C0,8.7,.7,12.1,22.5,12.1C43.4,12.2,44.2,8.7,44.2,8.7L44.2,0z" fill="url(#lg4_417)" transform="translate(32.91,127.49)"/>


        <path id="shape30" d="M.4,-0L46.6,-0C46.8,-0,47,.2,47,.4L47,3.4C47,3.6,46.8,3.8,46.6,3.8L.4,3.8C.2,3.8,0,3.6,0,3.4L0,.4C0,.2,.2,-0,.4,-0z" fill="url(#lg3_417)" transform="translate(31.32,123.71)"/>


        <path id="shape31" d="M0,0L46.5,0L46.5,1.4L0,1.4L0,0z" fill="url(#lg10_417)" transform="translate(31.75,23.6)"/>


        <g transform="translate(46.43,83.66)">


            <path id="shape32" d="M-0,2.8C-0,1.3,1.3,-0,2.8,-0C4.4,-0,5.6,1.3,5.6,2.8C5.6,4.4,4.4,5.7,2.8,5.7C1.3,5.7,-0,4.4,-0,2.8z" fill="#7d040f" transform="translate(0,0)"/>


            <path id="shape33" d="M-0,2.3C-0,1,1,-0,2.3,-0C3.6,-0,4.6,1,4.6,2.3C4.6,3.6,3.6,4.6,2.3,4.6C1,4.6,-0,3.6,-0,2.3z" stroke="#ffffff" fill="url(#lg11_417)" transform="translate(0.52,0.52)"/>


        </g>


        <g transform="translate(57.61,83.66)">


            <path id="shape34" d="M-0,2.8C-0,1.3,1.3,-0,2.8,-0C4.4,-0,5.6,1.3,5.6,2.8C5.6,4.4,4.4,5.7,2.8,5.7C1.3,5.7,-0,4.4,-0,2.8z" fill="#276f71" transform="translate(0,0)"/>


            <path id="shape35" d="M-0,2.3C-0,1,1,-0,2.3,-0C3.6,-0,4.6,1,4.6,2.3C4.6,3.6,3.6,4.6,2.3,4.6C1,4.6,-0,3.6,-0,2.3z" stroke="#ffffff" fill="url(#lg12_417)" transform="translate(0.52,0.52)"/>


        </g>


        <g transform="translate(52.15,65.46)">


            <path id="shape36" d="M4.3,0C4.5,.2,4.4,.8,4.8,1.4C5.1,2,5.7,2.2,5.7,2.5C5.7,2.8,5.1,3,4.8,3.6C4.5,4.1,4.6,4.8,4.3,5C4,5.2,3.6,4.7,2.8,4.7C2.1,4.7,1.7,5.1,1.4,5C1.1,4.8,1.3,4.3,.9,3.6C.6,3,0,2.9,0,2.5C0,2.1,.5,2,.9,1.3C1.3,.7,1.2,.1,1.4,0C1.6,-0.1,2.1,.3,2.9,.3C3.7,.3,4.1,-0.1,4.3,0z" fill="url(#lg13_417)"/>


            <path fill-opacity="0.2" id="shape37" d="M4,0C4.3,.2,4.2,.7,4.5,1.3C4.8,1.9,5.4,2.1,5.4,2.4C5.4,2.7,4.8,2.9,4.5,3.4C4.2,3.9,4.4,4.5,4,4.7C3.7,4.9,3.4,4.5,2.7,4.5C2,4.5,1.6,4.8,1.3,4.7C1.1,4.6,1.2,4,.8,3.4C.5,2.9,0,2.7,0,2.4C0,2,.5,1.9,.9,1.3C1.2,.6,1.2,.1,1.3,0C1.5,-0.1,2,.2,2.7,.2C3.5,.2,3.8,-0.1,4,0z" fill="#ffffff" transform="translate(0.15,0.13)"/>


            <path id="shape38" d="M0,1.8C0,.8,.8,0,1.8,0C2.7,0,3.5,.8,3.5,1.8C3.5,2.7,2.7,3.5,1.8,3.5C.8,3.5,0,2.7,0,1.8z" stroke="#717070" fill="#3e3938" transform="translate(1.1,0.75)"/>


            <path fill-opacity="0.17" id="shape39" d="M.4,1.6C.4,.8,-0.5,0,.3,0C1.2,0,1.9,.7,1.9,1.5C1.9,2.4,1.2,3,.3,3C-0.5,3,.4,2.5,.4,1.6z" fill="#ffffff" transform="translate(2.51,0.99)"/>


        </g>


    </g>


</svg>

<rect width="112" height="172" stroke="none" stroke-width="2" fill="white" fill-opacity="0" style="cursor: default;"/>

</g><!--End Valve-->


<!--PID-->
<g transform="matrix(0.4 0 0 0.4 401 157)">

<ellipse id="pidEllipse" fill="gold" stroke="#800000" stroke-width="4" cx="0" cy="0" rx="152" ry="64"/>


 <foreignObject class="noselect" id="foAdjust" width="300" height="100" x="-120" y="-50" pointer-events="none">


<table xmlns="http://www.w3.org/1999/xhtml" cellpadding="0">


<tbody>

<tr>

<td align="center" colspan="5">

Tune Controller:<input type="checkbox" id="adjustControllerCheck" />

</td>

</tr>


    <tr align="center">


    <td>

SP:<input disabled="" style="margin-right: 0px;margin-left: 0px;" type="radio" name="tuneRadio" id="tuneSPClick" />

</td>


    <td>

P:<input style="margin-right: 0px;margin-left: 0px;" disabled="" type="radio" name="tuneRadio" id="tunePClick" />

</td>


    <td>

I:<input disabled="" title="turn off Integral" id="turnOffIntegralCheck" type="checkbox" checked="" style="margin-right: 0px;margin-left: 0px;" />

<input style="margin-right: 0px;margin-left: 0px;" disabled="" type="radio" name="tuneRadio" id="tuneIClick" />

</td>


    <td>

D:<input disabled="" title="turn off Derivative" id="turnOffDerivativeCheck" type="checkbox" checked="" style="margin-right: 0px;margin-left: 0px;" />

<input style="margin-right: 0px;margin-left: 0px;" disabled="" type="radio" name="tuneRadio" id="tuneDClick" />

</td>


    <td>

CO:<input disabled="" type="radio" style="margin-right: 0px;margin-left: 0px;" name="tuneRadio" id="tuneCOClick" />

</td>


    </tr>


    <tr align="center">


    <td>

<input type="text" style="width:40px" id="tuneSPValue" value="100.0" />

</td>


    <td>

<input type="text" style="width:40px" id="tunePValue" value="1" />

</td>


    <td>

<input type="text" style="width:40px" id="tuneIValue" value="10" />

</td>


    <td>

<input type="text" style="width:40px" id="tuneDValue" value="1" />

</td>


    <td>

<input type="text" style="width:40px" id="tuneCOValue" value="0" />

</td>


    </tr>


    <tr>

<td align="center" colspan="5">


        <table>


        <tbody>

<tr>


        <td>

<button disabled="" style="padding:0;width:30px;height:30px">

<img src="" alt="" width="25" height="25" />

</button>

</td>


        <td>


            <select disabled="" id="incrementSelect" title="Increment value">


              <option value="">

.10</option>


              <option value="">

.50</option>


              <option selected="" value="">

1.0</option>


              <option value="">

5.0</option>


              <option value="">

10</option>



            </select>


        </td>


        <td>

<button disabled="" style="padding:0;width:30px;height:30px">

<img src="" alt="" width="25" height="25" />

</button>

</td>


        </tr>


        </tbody>

</table>


    </td>

</tr>


</tbody>

</table>


</foreignObject>


</g><!--end PID-->

<!--Button-->
<g myScale=".4" transform="matrix(0.4 0 0 0.4 351 80)" myRotate="0" myStatus="off">
<g cursor="default">
<defs id="onOffButtonDefs"><filter id="onOffButtonDropShadow" height="40">
    <feGaussianBlur in="SourceAlpha" stdDeviation="10"/> <!-- stdDeviation is how much to blur -->
    <feOffset dx="6" dy="10" result="offsetblur"/> <!-- how much to offset -->
    <feMerge>
        <feMergeNode/> <!-- this contains the offset blurred image -->
        <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
    </feMerge>
</filter><linearGradient id="linearGradientOnOffButton">
            <stop style="stop-color:#000000;stop-opacity:0" offset="0"/>
            <stop style="stop-color:#000000;stop-opacity:0.5" offset="1"/>
        </linearGradient><linearGradient id="linearGradientOnOffButton2">
            <stop style="stop-color:#ffffff;stop-opacity:1" offset="0"/>
            <stop style="stop-color:#ffffff;stop-opacity:0" offset="1"/>
        </linearGradient><linearGradient x1="120" y1="10" x2="120" y2="50" id="linearGradientOnOffButtonHighlight" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linearGradientOnOffButton2" gradientUnits="userSpaceOnUse"/><radialGradient cx="120" cy="170" r="100" fx="120" fy="170" id="radialGradientOnOffButton" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#linearGradientOnOffButton" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0,-0.72727275,2,0,-220,170)"/>
    </defs>
    <rect  onClick="startStopPump()" aria-pressed="false"  fill="red" width="220" height="80" ry="40" x="10" y="10" id="ButtonBase" style="stroke:none" filter="url(#onOffButtonDropShadow)"/>
        <rect width="220" height="80" ry="40" x="10" y="10" id="ButtonGlow" pointer-events="none" style="fill:url(#radialGradientOnOffButton);stroke:none"/>
        <text x="120" y="66" id="buttonText" pointer-events="none" xml:space="preserve" style="font-size:40px;text-align:center;text-anchor:middle;fill:#000000;stroke:none;font-family:Sans">OFF</text>
        <text x="120" y="64.5" id="buttonTextOffset" pointer-events="none" xml:space="preserve" style="font-size:40px;text-align:center;text-anchor:middle;fill:#ffffff;stroke:none;font-family:Sans">OFF</text>
        <path d="m 50,15 140,0 c 11.08,0 22.51667,10.914008 20,20 C 208.16563,41.622482 201.08,40 190,40 L 50.00005,40 C 38.92005,40 31.834332,41.622512 30,35 27.483323,25.914009 38.92,15 50,15 z" id="ButtonHighlight" pointer-events="none" style="fill:url(#linearGradientOnOffButtonHighlight)"/>
    </g>

</g>




<!--Flow Transmitter-->
</g><g xmlns="http://www.w3.org/2000/svg" transform="matrix(0.3 0 0 0.3 93.65 111.75)" parentid="component1520372636284">

<rect fill="white" fill-opacity="0" stroke="#000000" stroke-width="2" x="0" y="0" width="75" height="61" rx="10" ry="10" transform="matrix(1 0 0 1 62 448)" id="rect27"/>

<rect fill="#000000" fill-opacity="1.0" stroke="#000000" stroke-width="2" x="0" y="0" width="18" height="31" transform="matrix(1 0 0 1 92 509)" id="rect47"/>

<rect fill="white" fill-opacity="0" stroke="#000000" stroke-width="2" x="0" y="0" width="139" height="59" transform="matrix(1 0 0 1 30 541)" id="rect73"/>

<text font-family="Arial" font-size="30" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 35 631)" id="text97">


Magnetic</text>

<defs>

<pattern id="fill15203726186014" patternUnits="userSpaceOnUse" width="5" height="5" addto="fill">


				<path d="M 0 2.5 c 0.625 -1.25 , 1.875 -1.25 , 2.5 0 c 0.625 1.25 , 1.875 1.25 , 2.5 0 M -2.5 2.5 c 0.625 1.25 , 1.875 1.25 , 2.5 0 M 5 2.5 c 0.625 -1.25 , 1.875 -1.25 , 2.5 0" fill="transparent" stroke-width="0.5" shape-rendering="auto" stroke="#0000FF" stroke-linecap="square"/>


			</pattern>

</defs>

<rect fill="url(#fill15203726186014)" stroke="#0000FF" stroke-width="1" x="0" y="0" width="70" height="28" transform="matrix(1 0 0 1 65 556)" fill-opacity="null" id="rect121"/>

<rect fill="#7FFF00" fill-opacity="1.0" stroke="#0000FF" stroke-width="1" x="0" y="0" width="5" height="37" transform="translate(133 551)" id="rect123"/>

<rect fill="#FF0000" fill-opacity="1.0" stroke="#0000FF" stroke-width="1" x="0" y="0" width="5" height="37" transform="matrix(1 0 0 1 60 552)" id="rect125"/>

<rect fill="white" fill-opacity="0" stroke="#000000" stroke-width="2" x="0" y="0" width="21" height="98" transform="matrix(1 0 0 1 169 520)" id="rect127"/>

<rect fill="white" fill-opacity="0" stroke="#000000" stroke-width="2" x="0" y="0" width="21" height="98" transform="matrix(1 0 0 1 9 522)" id="rect129"/>

<text font-family="Arial" font-size="40" font-weight="bold" font-style="normal" stroke="none" stroke-width="0.8" fill="#000000" transform="matrix(1 0 0 1 74 492)" filter="null" id="text141">


FT</text>

<text font-family="Arial" font-size="40" font-weight="bold" font-style="normal" stroke="none" stroke-width="0" fill="#FF0000" transform="matrix(1 0 0 1 35 582)" id="text169">


+</text>

<text font-family="Arial" font-size="50" font-weight="bold" font-style="normal" stroke="none" stroke-width="0" fill="#00FF00" transform="matrix(1 0 0 1 143 583)" id="text171">


-</text>

<text font-size="30" font-family="Arial Unicode MS" stroke-width="0.8" fill="#0000FF" stroke="black" x="-17.8203125" y="13.5" transform="matrix(1 0 0 1 105 596)" id="icon19">


⯊</text>

<text font-size="30" font-family="Arial Unicode MS" stroke-width="0.8" fill="#0000FF" stroke="black" x="-17.8203125" y="13.5" transform="matrix(1 0 0 1 105 539)" id="icon21">


⯋</text>

<rect width="181" height="189" fill="white" fill-opacity="0" transform="translate(9,448)" style="cursor: default;" vector-effects="non-scaling-stroke" stroke-width="6" stroke-opacity=".5"/>

<defs>


			<marker id="arrow0000FF" viewBox="0 0 8000 8000" vector-effect="non-scaling-stroke" refX="250" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="#0000FF" stroke-linejoin="bevel">


				<path d="M2 59,293 148,1 243,121 151,Z" stroke="RGB(0,0,0)"/>


			</marker>


		</defs>

</g><!--End Flow Meter-->




<rect stroke="#000000" stroke-width="2" fill="url(#wrhof)" transform="matrix(1 0 0 1 23 104)" width="52" height="99" rotateAngle="0"/><path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1" stroke-opacity="1.0" stroke-dasharray="8 4" marker-end="url(#arrow000000)" d="M 462 157 L 499 157 L 499 116 L 630 116" rightAngle="true" rotateAngle="0"/><path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1" stroke-opacity="1.0" stroke-dasharray="8 4" marker-end="url(#arrow000000)" d="M 402 238 L 402 182" rightAngle="true"/><path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1" stroke-opacity="1.0" stroke-dasharray="8 4" marker-end="url(#arrow000000)" d="M 401 213 L 350 213" rightAngle="true" rotateAngle="0"/><path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1" stroke-opacity="1.0" stroke-dasharray="8 4" marker-end="url(#arrow000000)" d="M 225 132 L 225 158 L 337 158" rightAngle="true"/><path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1" stroke-opacity="1.0" stroke-dasharray="8 4" marker-end="url(#arrow000000)" d="M 123 246 L 123 214" rightAngle="true"/>




<path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1" stroke-opacity="1.0" d="M 73 106 L 24 200"/>
<path fill="none" fill-opacity="1.0" stroke="#000000" stroke-width="1" stroke-opacity="1.0" d="M 24 106 L 73 201"/>

<text font-family="Arial" font-size="12" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 17 16)" rotateAngle="0">Outside</text><text font-family="Arial" font-size="12" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 26 26)" rotateAngle="0">Air</text><text font-family="Arial" font-size="12" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 541 154)" rotateAngle="0">Steam</text><text font-family="Arial" font-size="12" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 277 155)" rotateAngle="0">Setpoint</text><text font-family="Arial" font-size="12" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 286 169)" rotateAngle="0">Adjust</text><text font-family="Arial" font-size="20" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 83 125)" rotateAngle="0">Building</text><text font-family="Arial" font-size="20" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 82 142)" rotateAngle="0">Heating</text><text font-family="Arial" font-size="20" font-weight="normal" font-style="normal" stroke="none" stroke-width="0" fill="#000000" transform="matrix(1 0 0 1 504 285)" rotateAngle="0">Steam-to-Hot Water Converter</text>


<!--Digital Readout -->
<g transform="matrix(0.5 0 0 0.5 554 69)" title="Valve Position" scale=".5" units="Percentage Open %" max="100" faceColor="#87CEEB" numBorderColor="#1E90FF" numColor="#00FF00" numBgColor="#000000"><foreignObject id="digitalReadoutFO" overflow="visible" x="-100" y="-40" width="200" height="80"><div xmlns="http://www.w3.org/1999/xhtml" id="digitalReadoutContainerDiv" style="font-family: arial; border: 1px solid black; font-size: 16px; overflow: hidden; height: 80px; padding: 10px; background: rgb(135, 206, 235); border-radius: 8px; width: 100%; text-align: center;"><div id="digitalReadoutTitleDiv">Valve Position</div><div id="digitalReadoutValue" style="border: 6px inset rgb(30, 144, 255); width: 180px; background: rgb(0, 0, 0); color: rgb(0, 255, 0); font-weight: bold; font-size: 30px;">0</div><div id="digitalReadoutUnit">Percentage Open %</div></div></foreignObject><rect id="digitalReadoutCoverRect" x="-100" y="-40" width="200" height="80" stroke="none" fill="white" fill-opacity="0"/></g>






<path fill="none" fill-opacity="1.0" stroke="#FF0000" stroke-width="2" stroke-opacity="1.0" marker-end="url(#arrowFF0000)" d="M 718 175 L 718 152 L 743 152" rightAngle="true"/></g></g>


<defs id="arrowDefs"><marker id="arrowADFF2F" viewBox="0 0 8000 8000" vector-effect="non-scaling-stroke" refX="250" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="#ADFF2F" stroke-linejoin="bevel"><path d="M2 59,293 148,1 243,121 151,Z" stroke="RGB(0,0,0)"/></marker><marker id="arrowFF0000" viewBox="0 0 8000 8000" vector-effect="non-scaling-stroke" refX="250" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="#FF0000" stroke-linejoin="bevel"><path d="M2 59,293 148,1 243,121 151,Z" stroke="RGB(0,0,0)"/></marker><marker id="arrow000000" viewBox="0 0 8000 8000" vector-effect="non-scaling-stroke" refX="250" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="#000000" stroke-linejoin="bevel"><path d="M2 59,293 148,1 243,121 151,Z" stroke="RGB(0,0,0)"/></marker><marker id="arrowADFF2F" viewBox="0 0 8000 8000" vector-effect="non-scaling-stroke" refX="250" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="#ADFF2F" stroke-linejoin="bevel"><path d="M2 59,293 148,1 243,121 151,Z" stroke="RGB(0,0,0)"/></marker><marker id="arrowFF0000" viewBox="0 0 8000 8000" vector-effect="non-scaling-stroke" refX="250" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="#FF0000" stroke-linejoin="bevel"><path d="M2 59,293 148,1 243,121 151,Z" stroke="RGB(0,0,0)"/></marker><marker id="arrow000000" viewBox="0 0 8000 8000" vector-effect="non-scaling-stroke" refX="250" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="#000000" stroke-linejoin="bevel"><path d="M2 59,293 148,1 243,121 151,Z" stroke="RGB(0,0,0)"/></marker></defs><defs id="defsPattern"><pattern id="wrhof" patternUnits="userSpaceOnUse" width="5" height="5" addTo="fill"><path d="M 0 2.5 c 0.625 -1.25 , 1.875 -1.25 , 2.5 0 c 0.625 1.25 , 1.875 1.25 , 2.5 0 M -2.5 2.5 c 0.625 1.25 , 1.875 1.25 , 2.5 0 M 5 2.5 c 0.625 -1.25 , 1.875 -1.25 , 2.5 0" fill="transparent" stroke-width="1.0" shape-rendering="auto" stroke="#FF0000" stroke-linecap="square"/></pattern><pattern id="wrhof" patternUnits="userSpaceOnUse" width="5" height="5" addTo="fill"><path d="M 0 2.5 c 0.625 -1.25 , 1.875 -1.25 , 2.5 0 c 0.625 1.25 , 1.875 1.25 , 2.5 0 M -2.5 2.5 c 0.625 1.25 , 1.875 1.25 , 2.5 0 M 5 2.5 c 0.625 -1.25 , 1.875 -1.25 , 2.5 0" fill="transparent" stroke-width="1.0" shape-rendering="auto" stroke="#FF0000" stroke-linecap="square"/></pattern></defs><defs id="pipe3dDefs"><filter id="pipe3D"><feFlood flood-color="black"/><feComposite operator="out" in2="SourceGraphic"/><feGaussianBlur stdDeviation="6"/><feComposite operator="atop" in2="SourceGraphic"/></filter></defs>

<g id="gaugeGPMGaugeContainer" transform='translate(120,165)' />
<g id="gaugeHWSGaugeContainer" transform='translate(315,197)' />
<g id="gaugeOATGaugeContainer" transform='translate(217,136)' />

</svg>
</div>

</td>
</tr></table>
    <br><button title="Show Javascript Source" onclick=showSource()>Javascript Source</button> <button title="Close javascript source" disabled id=closeSourceButton onClick=closeSource()>X</button>

 <div id=sourceDiv style=overflow:auto;width:100%;height:1px;visibility:hidden;overflow:hidden>
  <br>Javascript:
  <div id=jsCodeDiv style=overflow:auto;width:90%;text-align:left; ></div>
</div>
</center>
    </div>



<script id=myScript>

//---status: Message received---
var pumpMsg="OFF"
function startStopPump()  //---ON or OFF--
{
    if(pumpMsg=="OFF")
    {
        outsideAirRangeValue.disabled=false
        HWSRangeValue.disabled=false
        flowGpmRangeValue.disabled=false
        valveRangeValue.disabled=false
        changeGaugeHWS(130)
        changeGaugeOAT(70)
        changeGaugeGPM(200)
        changeDigitalReadout(35)
    /*
        HWSTemp=true
        OutsideAir=true
        FlowGpm=true
        ValvePos=true
        sendHWS(130)
        sendOAT(70)
        sendFLOW(200)
        sendVALVE(35)
     */
        if(!ScadaArrows) //---start run and initialize arrows--
        {
            runArrows()
            document.getElementById("arrowLine1").setAttribute("display","block")
            document.getElementById("arrowLine2").setAttribute("display","block")
        }
        else
            MyArrows.play()

        ButtonBase.setAttribute("fill","green")

        buttonText.firstChild.nodeValue="ON"
        buttonTextOffset.firstChild.nodeValue="ON"
        pumpMsg="ON"
    }

}



//---HWS--
function changeGaugeHWS(value)
{
    var key="gaugeHWS"
    gauges[key].redraw(value);
}
//---OAT--
function changeGaugeOAT(value)
{
    var key="gaugeOAT"
    gauges[key].redraw(value);
}
//---GPM--
function changeGaugeGPM(value)
{
    var key="gaugeGPM"
    gauges[key].redraw(value);
}


function changeDigitalReadout(value)
{
    digitalReadoutValue.innerHTML=value
}

//-------Data Acquisition-----
var OutsideAir=false
function sendOAT(data) //---slider---
{
    if(OutsideAir==true)
    {
        var utcms=new Date().getTime()
        sendXML="<scada oat='"+data+"' />"

        outsideAirValue.value=data
        changeGaugeOAT(data)
        console.log(sendXML)
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "sendOAT.asp", true);
        xhr.onload = function()
        {

            if (this.status == 500)
            {
                console.log(xhr.responseText)
            }

            OutsideAir=false

        };

        xhr.send(sendXML)
    }
}
var HWSTemp=false
function sendHWS(data)   //---slider---
{
    if(HWSTemp==true)
    {
        HWSValue.value=data
        changeGaugeHWS(data)
        var utcms=new Date().getTime()
        sendXML="<scada hws='"+data+"' />"
           var xhr = new XMLHttpRequest();
        xhr.open("POST", "sendHWS.asp", true);
        xhr.onload = function()
        {
             if (this.status == 500)
            {
               console.log(xhr.responseText)
             }

             HWSTemp=false

        };

        xhr.send(sendXML);
    }
}

var FlowGpm=false
function sendFLOW(data)   //---slider---
{
    if(FlowGpm==true)
    {
        flowGpmValue.value=data
        changeGaugeGPM(data)
        var utcms=new Date().getTime()
        sendXML="<scada flow='"+data+"' />"
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "sendFLOW.asp", true);
        xhr.onload = function()
        {

            if (this.status == 500)
            {
               console.log(xhr.responseText)
             }

           FlowGpm=false


        };

        xhr.send(sendXML);
    }
}
 var ValvePos=false
function sendVALVE(data)   //---slider---
{
     if(ValvePos==true)
    {
        valveValue.value=data
        changeDigitalReadout(data)
        var utcms=new Date().getTime()
        sendXML="<scada valve='"+data+"' />"
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "sendVALVE.asp", true);
        xhr.onload = function()
        {

            if (this.status == 500)
            {
               console.log(xhr.responseText)
             }

               ValvePos=false

        };

        xhr.send(sendXML);
    }
}



//----------------DATA TABLE---------------------
var DocDATA
function showDataTable()
{
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "DATA/HotWaterSystem.xml", true);
        xhr.onload = function()
        {

            var xmlString = this.responseText

            //---DOMParser---
            var parser = new DOMParser();
            DocDATA = parser.parseFromString(xmlString, "text/xml").documentElement;
            //---clear previous table----
            var rows = dataTable.rows
            for(var k = rows.length-1; k>=0; k--)
                dataTable.deleteRow(rows[k])
               var row = dataTable.insertRow()
               row.insertCell(0).innerHTML="Date (Locale)"
                row.insertCell(1).innerHTML="OAT &deg;"
                row.insertCell(2).innerHTML="HWS &deg;"
                row.insertCell(3).innerHTML="FLOW gpm"
                row.insertCell(4).innerHTML="VALVE %"

                //----write table---
                var data = DocDATA.childNodes

            for(var k = 0; k<data.length; k++)
            {
                var utcms=+data[k].getAttribute("utcms")
                var date=new Date(utcms).toLocaleString()

                var oat=data[k].getAttribute("oat")
                var hws=data[k].getAttribute("hws")
                var flow=data[k].getAttribute("flow")
                var valve=data[k].getAttribute("valve")
                var row = dataTable.insertRow()
                row.insertCell(0).innerHTML=date
                row.insertCell(1).innerHTML=oat
                row.insertCell(2).innerHTML=hws
                row.insertCell(3).innerHTML=flow
                row.insertCell(4).innerHTML=valve
            }

             openDataTable()
        }
        xhr.send()

}


function openDataTable()
{
    var height=dataTableDiv.scrollHeight
    if(height>460)
    {

        dataTableDiv.style.overflow="auto"
        height=460
    }

    d3.select("#dataTableDiv").transition().duration(800).style("height", height+"px")
    dataTableDiv.style.visibility='visible'
}
function closeDataTable()
{
     var height=1
     d3.select("#dataTableDiv").transition().duration(400).style("height", height+"px")
    setTimeout("dataTableDiv.style.visibility='hidden'",500)
}

//---convert XML to JSON---
var JSONDATA=[]
function jsonData()
{
    var data = DocDATA.childNodes
    for(var k=0;k<data.length;k++)
    {
        var utcms=data[k].getAttribute("utcms")
        var oat=data[k].getAttribute("oat")
        var hws=data[k].getAttribute("hws")
        var flow=data[k].getAttribute("flow")
        var valve=data[k].getAttribute("valve")
        var jsonObj={utcms:utcms,oat:oat,hws:hws,flow:flow,valve:valve}

        JSONDATA.push(jsonObj)
    }
    jsonValue.value=JSON.stringify(JSONDATA)
}
</script>
<script>

function insertFlowArrows()
{
    d3.select("#pathArrowsG").append("path")
    .attr("id","arrowLine1")
    .attr("fill","none")
    .attr("display","none")
    .attr("stroke","black")
    .attr("stroke-width","2")
    .attr("marker-end","url(#arrow000000)")
    .attr("d","M0,0 15,0 30,0")
    d3.select("#pathArrowsG").append("path")
    .attr("id","arrowLine2")
    .attr("fill","none")
    .attr("display","none")
    .attr("stroke","black")
    .attr("stroke-width","2")
    .attr("marker-end","url(#arrow000000)")
    .attr("d","M0,0 15,0 30,0")
}

var ScadaArrows=false
var MyArrows   //---onload:  MyArrows=SVG.adopt(pipe)  ---
function runArrows()
{
    var duration=6000
    var rotateAngle=6*360
    ScadaArrows=true

    var pathLength=pipe.getTotalLength()
    var arrow2Offset=pipe.getTotalLength()*.33
    MyArrows.animate(duration).during(
    function(pos) //---setter--
    {
            var length=pathLength*pos
            var Pnt0=pipe.getPointAtLength(length) //--start
            var Pnt1=pipe.getPointAtLength(length+15) //--mid---
            var Pnt2=pipe.getPointAtLength(length+30) //---end---
            var d="M"+[Pnt0.x,Pnt0.y,Pnt1.x,Pnt1.y,Pnt2.x,Pnt2.y].toString()
            arrowLine1.setAttribute("d",d)

        if(length<(pathLength-arrow2Offset))
        {
            var Pnt0=pipe.getPointAtLength(length+arrow2Offset) //--start
            var Pnt1=pipe.getPointAtLength(length+15+arrow2Offset) //--mid---
            var Pnt2=pipe.getPointAtLength(length+30+arrow2Offset) //---end---
            var d="M"+[Pnt0.x,Pnt0.y,Pnt1.x,Pnt1.y,Pnt2.x,Pnt2.y].toString()
            arrowLine2.setAttribute("d",d)
        }
        else if(length>=(pathLength-arrow2Offset))
        {
            var myLength=length-arrow2Offset
            var Pnt0=pipe.getPointAtLength(myLength-arrow2Offset) //--start
            var Pnt1=pipe.getPointAtLength(myLength+15-arrow2Offset) //--mid---
            var Pnt2=pipe.getPointAtLength(myLength+30-arrow2Offset) //---end---
            var d="M"+[Pnt0.x,Pnt0.y,Pnt1.x,Pnt1.y,Pnt2.x,Pnt2.y].toString()
            arrowLine2.setAttribute("d",d)
        }
        document.getElementById("Impeller").setAttribute("transform","rotate("+(rotateAngle*pos)+" "+cx+" "+cy+")")


    })
    .after(function(){
        runArrows()
    })
}


//==============Impeller==============
//--onload---
//---impeller rotate center point---
var cx
var cy
function placeAsImpeller()
{

    var fontSize=60
    var unicode="273D"
    var code = parseInt(unicode, 16)
    var icon = d3.select("#mySVG").append("text")
    .attr("id", "Impeller")
    .attr("x", 399)
    .attr("y", 43)
    .attr("text-anchor", "middle")
    .attr("font-size", fontSize)
    .attr("font-family", "Arial Unicode MS")
    .attr("dy",fontSize/2-4)
    .attr("stroke-width", 1.2)
    .attr("fill", "blue")
    .attr("stroke", "black")
    .text(String.fromCharCode(code))

    //---get rotate center point---
   var bb=Impeller.getBBox()

   cx=bb.x+.5*bb.width
   cy=bb.y+.5*bb.height
}

//--createGauge(name, label, min, max,majorTicks,minorTicks,ringColor,faceColor,diameter,orangeZoneRange,redZoneRange,greenZoneRange,units)
function createGauges() //----this application configuration----
{
    createGauge("gaugeOAT", "OAT",-20,120,5,10,"red","ghostwhite",80,null,null,null,"");
//<g width="72" height="72" label="OAT" min="-20" max="120" majorTicks="5" minorTicks="10" ringColor="#9932CC" faceColor="#EE82EE" diameter="80" units="℉" transform="matrix(1 0 0 1 186 119)">


 createGauge("gaugeHWS", "HWS",60,220,5,10,"darkviolet","ghostwhite",80,null,null,null,"");
//<g width="72" height="72" label="HWS" min="60" max="220" majorTicks="5" minorTicks="10" ringColor="#9932CC" faceColor="#FF0000" diameter="80" units="℉" transform="matrix(1 0 0 1 280 177)">


    createGauge("gaugeGPM", "GPM",0,600,5,10,"blue","ghostwhite",80,null,null,null,"");
//<g width="72" height="72" label="GPM" min="0" max="600" majorTicks="5" minorTicks="10" ringColor="#9932CC" faceColor="#87CEFA" diameter="80" units="" transform="matrix(1 0 0 1 88 146)">

}

//---onload this page---
function createStripChart() //----this application configuration----
{
    //buildProcessVariableChart(id, title, timeLine, timeLineUnits, faceColor, leftVariable, minLeft, maxLeft, setPointLeft, right1Variable, minRight1, maxRight1, right2Variable, minRight2, maxRight2, scale, transX, transY)<br>
    buildProcessVariableChart("pumpPVC", "Hot Water System",60,"Minutes","#adff2f","HWS(\u00B0F)", 60, 220, null, "Flow(GPM)", 0, 600,  "OAT(\u00B0F)",-20, 120,.6,199,310);
}


document.addEventListener("onload",init(),false)

//---channels---
var HWS
var OAT
var GPM
var PUMP
var VALVE


function init()
{


  createGauges()

    placeAsImpeller()

    insertFlowArrows()
    MyArrows=SVG.adopt(pipe)
    //createStripChart()
    showSourceJS()
}

function showSource()
{
  sourceDiv.style.visibility="visible"
  sourceDiv.style.height=+sourceDiv.scrollHeight+"px"

  closeSourceButton.disabled=false

  var frameHeight=container.scrollHeight+100

    d3.select(parent.frameHWS).transition().duration(1000).attr("height",frameHeight)


}

function closeSource()
{
   d3.select("#sourceDiv").transition().duration(1000).style("height","1px")
   setTimeout('sourceDiv.style.visibility="hidden"',1000)
  closeSourceButton.disabled=true

   d3.select(parent.frameHWS).transition().duration(1000).attr("height",880)
}



</script>

</body>

</html>